<template>
  <div>
    <el-select
      class="form-width-160"
      v-for="(item, idx) in selectedListArr.length"
      :key="idx"
      v-model="selectedValueArr[idx]"
      @change="(value) => changeSelectData(value, idx)"
      value-key="id"
    >
      <el-option
        v-for="item of selectedListArr[idx]"
        :key="`${item.id}${idx}`"
        :label="item.categoryName"
        :value="item"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classificationList: [], //一级目录的数据，其实就是总的数据
      selectedListArr: [], //二维数组，每一级目录的数据存入当前下标
      selectedValueArr: [], //一维数组，选中数据组成的数组对象
    };
  },
  props: {
    value: "",
  },
  created() {
    console.log(this.value); //父节点传过来的数据
    this.getGoodsCategoryList(); //初始化数据获取所有的数据
  },
  methods: {
    //this.value如果有数据，调用该方法
    findId(arr1, id) {
      console.log(arr1, "arr");
      //数据回显
      var temp = [];
      var arrId = [];
      let newArr = [];
      var forFn = function (arr, id) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.id === id) {
            newArr.unshift(arr); //二维数组，每一级目录的数据存入当前下标
            temp.unshift(item); //一维数组，选中数据组成的数组对象
            arrId.unshift(id); //选中数据的id，包括父id
            forFn(arr1, item.pId);
            break;
          } else {
            if (item.childNodes) {
              forFn(item.childNodes, id);
            }
          }
        }
      };
      forFn(arr1, id);
      this.selectedListArr = newArr;
      this.selectedValueArr = temp;
      console.log(newArr, "测试数据");
      console.log(temp, "数据");
      console.log(arrId, "id数据"); // return temp
    },
     //加载数据
    initSelectArr(index) {
      if (index == 0) {
        //当下标为0时，其实就是新增的数据
        this.selectedListArr = [this.classificationList];
        this.selectedValueArr = [""];
      } else {
        //否则对数据进行处理，
        this.selectedListArr = this.selectedListArr.slice(0, index + 1);
        this.selectedValueArr = this.selectedValueArr.slice(0, index + 1);
      }
    }, //选中数据后触发的方法
    changeSelectData(item, idx) {
      console.log(item, idx,"数据");
      this.initSelectArr(idx);
      this.selectedValueArr[idx] = item;
      if (item.childNodes && item.childNodes.length > 0) {
        this.selectedListArr.push(item.childNodes);
        this.selectedValueArr.push("");
      }
    }, //初始化数据获取所有的数据
    getGoodsCategoryList() {
      let childNodes = [
        {
          categoryImg: "https://www.baidu.com/img/bd_logo1.png",
          categoryName: "上衣",
          id: 2,
          pId: 1,
          sort: 1,
          childNodes: [
            {
              categoryImg: "https://www.baidu.com/img/bd_logo1.png",
              categoryName: "短袖",
              haveGoods: true,
              id: 5,
              pId: 2,
              sort: 1,
              childNodes: [
                {
                  id: 111,
                  pId: 5,
                  sort: 1,
                  categoryImg: "https://www.baidu.com/img/bd_logo1.png",
                  categoryName: "短袖裤子",
                  childNodes: [],
                },
                {
                  id: 122,
                  pId: 5,
                  sort: 1,
                  categoryImg: "https://www.baidu.com/img/bd_logo1.png",
                  categoryName: "短袖鞋子",
                  childNodes: [],
                },
              ],
            },
            {
              categoryImg: "https://www.baidu.com/img/bd_logo1.png",
              categoryName: "西装",
              haveGoods: false,
              id: 6,
              pId: 2,
              sort: 1,
              childNodes: [
                {
                  id: 112,
                  pId: 6,
                  sort: 1,
                  categoryImg: "https://www.baidu.com/img/bd_logo1.png",
                  categoryName: "西装裤子",
                  childNodes: [],
                },
                {
                  id: 121,
                  pId: 6,
                  sort: 1,
                  categoryImg: "https://www.baidu.com/img/bd_logo1.png",
                  categoryName: "西装鞋子",
                  childNodes: [],
                },
              ],
            },
          ],
        },
        {
          id: 11,
          pId: 1,
          sort: 1,
          categoryImg: "https://www.baidu.com/img/bd_logo1.png",
          categoryName: "裤子",
          childNodes: [
            {
              categoryImg: "https://www.baidu.com/img/bd_logo1.png",
              categoryName: "牛仔",
              haveGoods: true,
              id: 112222,
              pId: 11,
              sort: 1,
              childNodes: [],
            },
          ],
        },
        {
          id: 12,
          pId: 1,
          sort: 1,
          categoryImg: "https://www.baidu.com/img/bd_logo1.png",
          categoryName: "鞋子",
          childNodes: [
            {
              categoryImg: "https://www.baidu.com/img/bd_logo1.png",
              categoryName: "耐克",
              haveGoods: true,
              id: 1121,
              pId: 12,
              sort: 1,
              childNodes: [
                {
                  categoryImg: "https://www.baidu.com/img/bd_logo1.png",
                  categoryName: "西牛仔",
                  haveGoods: true,
                  id: 11211,
                  pId: 1121,
                  sort: 1,
                  childNodes: [],
                },
              ],
            },
            {
              categoryImg: "https://www.baidu.com/img/bd_logo1.png",
              categoryName: "阿迪",
              haveGoods: true,
              id: 1122,
              pId: 12,
              sort: 1,
              childNodes: [],
            },
          ],
        },
      ]; //模拟后端传过来的数据，在下面
      this.classificationList = childNodes;
      this.initSelectArr(0); //新增数据，页面加载
      if (this.value && this.value !== "") {
        this.findId(this.classificationList, this.value);
      }
    },
  },
};
</script>
 
<style scoped>
</style>